<template>
  <div class="app-container" style="background-color: #F6F7F8;">
    <div class="contentTop">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
        style="margin-left:24px; margin-bottom: 20px;">
        <el-form-item label="" prop="title">
          <el-input maxlength="100" clearable v-model="queryParams.title" placeholder="请输入搜索内容" style="width:300px;" />
        </el-form-item>
        <el-form-item v-if="user.admin" label="" prop="tenantId">
          <el-select v-model="queryParams.tenantId" clearable filterable placeholder="请输入租户" style="width:100%;">
            <el-option v-for="item in zuhuOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="zoneId">
          <el-select v-model="queryParams.zoneId" clearable filterable placeholder="请输入分类" style="width:100%;">
            <el-option v-for="item in fenleiOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click.stop="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click.stop="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- v-infinite-scroll="load" -->
    <div v-if="tableData.length > 0">
      <div class="item_history" @click.stop="detail(item, index)" v-for="(item, index) in tableData">
        <div class="title">{{ item.title }}</div>
        <div class="jianjie">{{ item.descrip }}</div>
        <div class="desc">
          <div class="bianqianContent" v-for="(item, index) in item.tags">
            <div class="biaoqian">{{ item }}</div>
          </div>
          <div class="zuozhe" style="opacity: 0.5;">作者：{{ item.createBy }}</div>
          <div style="margin-left:20px; opacity: 0.5;">发布于：{{ item.createTime }}</div>
        </div>
        <div class="caozuo">
          <div></div>
          <div>
            <el-button @click.stop="eidtAction(item)" round>编辑</el-button>
            <el-button @click.stop="biaoqianAction(item)" type="primary" round>标签</el-button>
            <el-button v-if="parseInt(item.status) != 1" @click.stop="fabuAction(item)" type="success"
              round>发布</el-button>
            <el-button @click.stop="deleteAction(item)" type="danger" round>删除</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="line-height: 300px; text-align: center; color: #999999;">
      还没有任何数据
    </div>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" style="background-color: #F6F7F8;"/>

    <el-dialog title="标签" :visible.sync="dialogVisible" width="50%">
      <div class="dialogBiaoqian">
        <div class="item" :class="{ item_select: item.select == 1 }" @click.stop="biaoqianClick(item, index)"
          v-for="(item, index) in biaoqianOptions" style="margin-right:20px">{{ item.name }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click.stop="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.stop="updateData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { article_page, article_delete, article_insert, article_update, article_publish, article_detail, article_updateTags } from "@/api/article"
import { tag_queryPage, tag_delete, tag_insert, tag_update } from "@/api/tag"
import { tenant_queryPage, tenant_delete, tenant_insert, tenant_update } from "@/api/tenant"
import { class_queryPage, class_delete, class_insert, class_update } from "@/api/fenlei"
import { getUserProfile } from "@/api/system/user.js"

export default {
  name: 'Index',
  components: {

  },
  data() {
    return {
      user: {},
      queryParams: {
        title: '',
        tenantId: null,
        zoneId: null,
        type: 0,
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      // 总条数
      total: 0,

      biaoqianRow: null,
      biaoqianOptions: [],
      dialogVisible: false,

      zuhuOptions: [],//租户列表
      fenleiOptions: [],//分类列表
    }
  },
  mounted() {
    this.getList();
    //获取租户列表
    this.getTenantList();
    //获取分类列表
    this.getClassList();

    getUserProfile().then(response => {
      this.user = response.data;
    });
  },
  methods: {
    getList() {
      article_page(this.queryParams).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    //获取租户列表
    getTenantList() {
      tenant_queryPage({ pageNum: -1 }).then(res => {
        this.zuhuOptions = res.data.records;
      })
    },
    //获取分类列表
    getClassList() {
      class_queryPage({ pageNum: -1 }).then(res => {
        this.fenleiOptions = res.data.records;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //详情
    detail(item, index) {
      this.$router.push({
        path: "/knowledge/detail",
        query: { id: item.id },
      });
    },
    eidtAction(row) {
      this.$router.push({
        path: "/knowledge/add",
        query: { id: row.id },
      });
    },
    //设置标签
    biaoqianAction(row) {
      this.biaoqianRow = row;
      //获取标签列表
      tag_queryPage({ pageNum: -1 }).then(res => {
        this.biaoqianOptions = res.data.records;

        for (let i = 0; i < this.biaoqianOptions.length; i++) {
          this.$set(this.biaoqianOptions[i], 'select', 0);
          for (let j = 0; j < row.tags.length; j++) {
            if (this.biaoqianOptions[i].name == row.tags[j]) {
              this.$set(this.biaoqianOptions[i], 'select', 1);
              break;
            }
          }

          this.dialogVisible = true;
        }
      })
    },
    biaoqianClick(item, index) {
      item.select = !item.select;
    },
    //发布
    fabuAction(row) {
      this.$modal.confirm('确认发布？').then(function () {
        return article_publish(row);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("发布成功!");
      }).catch(() => { });
    },
    deleteAction(row) {
      this.$modal.confirm('此操作将永久删除, 是否继续?').then(function () {
        return article_delete(row);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功!");
      }).catch(() => { });
    },
    updateData() {
      let targetIds = [];
      for (let i = 0; i < this.biaoqianOptions.length; i++) {
        if (this.biaoqianOptions[i].select == 1) {
          targetIds.push(this.biaoqianOptions[i].id);
        }
      }
      let form = {};
      form.id = this.biaoqianRow.id;
      form.targetIds = targetIds;
      article_updateTags(form).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.dialogVisible = false;
        this.getList();
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.contentTop {
  display: flex;
  justify-content: center;
}

.item_history {
  cursor: pointer;
  font-size: 16px;
  padding: 16px 24px 12px 24px;
  background-color: #ffffff;
  border-radius: 9px;
  margin-bottom: 15px;

  .title {
    font-weight: bold;
    text-align: left;
  }

  .jianjie {
    color: #555666;
    margin-top: 8px;
    text-align: left;
  }

  .desc {
    margin-top: 8px;
    display: flex;
    align-items: center;

    .bianqianContent {
      display: flex;
      align-items: center;
      margin-right: 15px;
    }

    .biaoqian {
      color: #fc5531;
      background-color: #fff5f2;
      padding: 3px 8px;
      margin-right: 5px;
    }

    .zuozhe {}
  }

  .caozuo {
    display: flex;
    justify-content: space-between;
  }
}

.dialogBiaoqian {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .item {
    padding: 4px 10px;
    background-color: #f1f1f1;
    border-radius: 10px;
    margin-top: 10px;
    cursor: pointer;
  }

  .item_select {
    background-color: #fc5531;
    color: #ffffff;
  }
}
</style>
